<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span='8'>作物名称：<el-input v-model='input' style='width: 80%'></el-input></el-col>
                <el-col :span='8'>&nbsp;</el-col>
                <el-col :span='8'><el-button @click='search'>检索</el-button></el-col>
            </el-row>
            <br>
            <br>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="yuliu1"
                    label="作物名称"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="payname"
                    label="购买人姓名"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="jine"
                    label="价格"
                    width="120">
                </el-table-column>

                <el-table-column
                    prop="yuliu2"
                    label="评论"
                    width="300">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">评论</el-button>
                        <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br><br>
            <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page='current'
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/orders/list").then(res=>{
            this.tableData =res.records
            this.current = res.current
            this.total = res.total
        })
    },
    methods: {
        handleClick(row) {
            this.$prompt('请输入评论', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
               this.$http.get("/v1/orders/ping?id="+row.id+"&ping="+value).then(res=>{
                   this.search()
               })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        handleClickDelete(row) {
            console.log(row);
            this.$http.get("/v1/orders/delete?id="+row.id).then(res=>{
                alert("删除成功")
                this.search()
            })
        },
        handleCurrentChange(val) {
            if (this.input === ''){
                this.input = null
            }
            this.$http.get("/v1/orders/list",{
                params:{
                    yuliu1: this.input,
                    page: val
                }
            }).then(res=>{
                this.tableData =res.records
                this.current = res.current
                this.total = res.total
            })
        },
        search(){
            if (this.input === ''){
                this.input = null
            }
            this.$http.get("/v1/orders/list",{
                params:{
                    yuliu1: this.input,
                }
            }).then(res=>{
                this.tableData =res.records
                this.current = res.current
                this.total = res.total
            })
        }
    },

    data() {
        return {
            current:1,
            total:10,
            input:null,
            tableData: []
        }
    }
}
</script>

<style scoped>

</style>
